<template>
    <div class="common-layout">
        <el-container>
            <el-container style="justify-content: center">
                <NavBar/>
            </el-container>
            <el-container>
                <el-aside width="200px">
                    <SideBar/>
                </el-aside>
                <el-main>
                    <router-view/>
                </el-main>
            </el-container>
            <el-footer class="footer" style="padding: 0 10px">
                <FootBar class="foo"/>
            </el-footer>
        </el-container>
    </div>
</template>

<script setup lang="ts">

import NavBar from "@/components/Home/NavBar.vue";
import SideBar from "@/components/Home/SideBar.vue";
import FootBar from "@/components/Home/FootBar.vue";
</script>

<style scoped>
.foo {
    background-color: #243958;
}
</style>
